<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多人用户聊天</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
    <style>
        body {
            margin: 20px;
        }

        .layui-card {
            width: 400px;
            margin-bottom: 20px;
        }

        .layui-card-header {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }

        .chat-area {
            height: 300px;
            overflow-y: scroll;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f2f2f2;
        }

        .message {
            margin-bottom: 10px;
            display: flex;
        }

        .self {
            justify-content: flex-end;
        }

        .message-bubble {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 5px;
            max-width: 70%;
            word-break: break-all;
        }

        .self .message-bubble {
            background-color: #5FB878;
            color: white;
        }

        .other .message-bubble {
            background-color: #1E9FFF;
            color: white;
        }

        .message .username {
            font-weight: bold;
            margin-right: 5px;
        }

        .message .timestamp {
            font-size: 12px;
            color: #999;
        }

        .message-input {
            width: calc(100% - 80px);
        }

        .send-btn {
            width: 70px;
        }
    </style>
</head>
<body>

<div class="layui-card">
    <div class="layui-card-header">多人用户聊天</div>
    <div class="layui-card-body chat-area" id="chatArea">
        <!-- 消息内容显示区域 -->
    </div>
    <div class="layui-card-footer">
        <textarea id="messageInput" placeholder="请输入消息" class="layui-textarea message-input"></textarea>
        <button class="layui-btn layui-btn-primary send-btn" id="sendBtn">发送</button>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
<script>
    layui.use(['layer'], function () {
        var layer = layui.layer;

        var chatArea = document.getElementById('chatArea');
        var messageInput = document.getElementById('messageInput');
        var sendBtn = document.getElementById('sendBtn');

        sendBtn.addEventListener('click', function () {
            var message = messageInput.value;
            if (message.trim() !== '') {
                sendMessage('我', message);
                messageInput.value = '';
            }
        });

        function sendMessage(username, message) {
            var messageContainer = document.createElement('div');
            var messageBubble = document.createElement('div');
            var usernameSpan = document.createElement('span');
            var timestampSpan = document.createElement('span');

            messageContainer.classList.add('message');

            if (username === '我') {
                messageContainer.classList.add('self');
            } else {
                messageContainer.classList.add('other');
            }

            usernameSpan.textContent = username;
            usernameSpan.classList.add('username');

            timestampSpan.textContent = getCurrentTimestamp();
            timestampSpan.classList.add('timestamp');

            messageBubble.textContent = message;
            messageBubble.classList.add('message-bubble');

            messageContainer.appendChild(usernameSpan);
            messageContainer.appendChild(timestampSpan);
            messageContainer.appendChild(document.createElement('br'));
            messageContainer.appendChild(messageBubble);

            chatArea.appendChild(messageContainer);
            chatArea.scrollTop = chatArea.scrollHeight;
        }

        function getCurrentTimestamp() {
            var date = new Date();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            return hours + ':' + minutes + ':' + seconds;
        }

        // 模拟其他用户发送消息
        setTimeout(function() {
            sendMessage('其他用户', '你好，这是一条测试消息。');
        }, 1000);

        setTimeout(function() {
            sendMessage('其他用户', '这是一条长一些的测试消息，用来测试消息气泡框的显示效果。');
        }, 2000);
    });
</script>

</body>
</html>
